<?php /* Template Name: چاپ کارت ویزین */
$vuejs = vcard_static . 'js/vue.min.js';
$jspdf = vcard_static . 'js/jspdf.min.js';
$jQuery = vcard_static . 'js/jquery-3.3.1.min.js';
if (WP_DEBUG) {
//        err_log('debug is on');
    $vuejs = vcard_static . 'js/vue.js';
    $jQuery = vcard_static . 'js/jquery-3.3.1.js';
    $jspdf = vcard_static . 'js/jspdf.js';



}




wp_enqueue_style('bulma', vcard_static . 'style/bulma.min.css', array(), null, 'all');
wp_enqueue_style('nahid', vcard_static . 'style/fonts.css', array(), null, 'all');
wp_enqueue_style('fontawesome', vcard_static . 'style/fontawesome/css/all.css', array(), null, 'all');
wp_enqueue_script('vue_script', vcard_static . 'js/gravityvcard.js', array(), null, true);
wp_enqueue_script('jspdf', $jspdf, array(), null, false);
wp_enqueue_script('vue_js', $vuejs, array(), null, false);


wp_localize_script('vue_js','vue_dict',array('ajxurl'=>admin_url('admin-ajax.php')));//.'/?action=social_id_check'))






?>

<!DOCTYPE html>
<html lang="en">
<head>
    <?php

    wp_head();

    //        echo vcard_static;

    ?>
    <meta charset="UTF-8">
    <title><?php the_title() ?></title>



</head>
<body>
<?php
//var_dump($wp_scripts->_WP_Dependency);
//wp_localize_script();
// var_dump(get_the_title());

?>
<div id="app">

    <div id="search">
    <div class="container" v-if="!authenticated">
        <div class="field">
            <label class="label">کد ملی</label>


            <p class="control has-icons-left has-icons-right">
                <input :class="classes.socialId"
                       placeholder="کدملی ده رقمی"
                       v-model="socialId"
                       id="socialid-input"
                       @keypress="enIntegerValidate('socialId', $event)"
                >
                <!-- <span class="icon is-medium is-left">
      <i class="fas fa-id-card"></i>
    </span> -->
                <span class="icon is-medium is-right">
      <i :class="fa_idcard"></i>
    </span>

            </p>

            <p class="help" id="social-id-help">کدملی خودرا با صفحه‌کلید انگلیسی وارد نمایید</p>
            <p class="help" 
            id="social-id-warning"
            v-show="id_card_warning"
            v-text="id_card_warning_text">
            </p>
        </div>

        <div id="phone-container" style="display: none;">
        <label class="label">شماره همراه:</label>
        <div class="field has-addons">
            <p class="control has-icons-left">
                <input :class="classes.phone"
                       v-model="phone"
                       @keypress="enIntegerValidate('phone', $event)"
                       @change="id_card_warning= false;"
                >
                <span class="icon is-medium is-left"><i 
                id="fa-icon" 
                :class="fa_phone"></i>
    </span>
            </p>
<!--            <p class="control">-->
<!--                <a class="button is-static is-medium"-->
<!--                   id="phone-number"-->
<!--                   v-text='phonePrefix'>-->
<!--                </a>-->
<!--            </p>-->



            <p class="control">
<!--                <a class="button is-static is-medium">-->
<!--                    @gmail.com-->
<!--                </a>-->


        </div>
        <p class="help" id="phone-number-help">
        دورقم باقی‌مانده شماره‌همراه را با صفحه کلید انگلیسی وارد کنید.
        </p>

<p class="help" 
            id="social-id-warning"
            v-show="phone_warning"
            v-text="phone_warning_text">
            </p>

        </div>
<!--        <div class="field">-->
<!--            <p class="control">-->
<!--                <button class="button is-success is-medium">-->
<!--                    دریافت کارت ورود-->
<!--                </button>-->
<!--            </p>-->
<!--        </div>-->

    </div>
    </div>
<div id="vcard">
    <vcard-template
            v-if="authenticated"
            :socialid="socialId"
            :photo="user.photo"
            :fname="user.fname"
            :lname="user.lname"
            :location="user.location"
            :gender="user.gender"

    ></vcard-template>
</div>


</div>


<?php
//echo get_template_directory_uri();
//get_footer();
wp_footer();

?>
<style >
    #meslogo
    {
        width:4cm;
        margin-left: auto;
        margin-right: auto;
        display: block;
    }

    #meslogo
    {
        width:4cm;
        margin-left: auto;
        margin-right: auto;
        display: block;
    }
    #personal-photo
    {
        width:3cm;
        height: 4cm;
        /*margin-left: auto;*/
        /*margin-right: auto;*/
        display: block;
    }

    #vcard-container {
        margin-top: auto;
        margin-right: 3mm;
        width: 10cm;
    }
    #fig-title{
        direction: rtl;
        text-align: center;
    }
    body {
        direction: rtl;
        font-family: Sahel Nahid;
    }
    div {
        font-family: Nahid;
    }
    div#search {
        display: block;
        margin-left: auto;
        margin-right: auto;
        padding:2cm;
        width: 800px;
    }
    h1,h2,h3,h4,h5,h6 {
        font-family: Sahel;
        font-weight: bold;
    }
    .control{
        text-align: right;
    }
    .input {
        width: 500px;
    }
</style>
</body>
</html>
